<template>
	<view class="box">
		<view style="display: flex;align-items: center;height: 100%;">
			<view style="width: 180rpx;height: 180rpx;" class="Skeleton"></view>
			<view
				style="margin-left: 40rpx;height:100%;display: flex;flex-direction: column;justify-content: space-around;">
				<view style="width: 200rpx;height: 60rpx;" class="Skeleton"></view>
				<view style="width: 200rpx;height: 60rpx;" class="Skeleton"></view>
			</view>
		</view>
		<view
			style="margin-left: 40rpx;height:100%;display: flex;flex-direction: column;justify-content: space-around;">
			<view style="width: 200rpx;height: 60rpx;" class="Skeleton"></view>
			<view style="width: 200rpx;height: 60rpx;" class="Skeleton"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "paySkeleton",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.box {
		// margin-top:  var(--status-bar-height) ;//给组件加个上边距
		justify-content: space-between;
		font-size: 26rpx;
		color: #010101;
		height: 200rpx;
		display: flex;
		align-items: center;
	}

	.Skeleton {
		background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
		background-size: 400% 100%;
		border-radius: 3px;
		animation: loading 1.5s infinite;
	}

	@keyframes loading {
		/* 骨架屏的动画 */

		0% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0 50%;
		}
	}
</style>